<!-- eslint-disable vue/v-on-event-hyphenation -->
<template>
	<div style="background-color: #fff; padding: 15px 5px">
		<!-- 搜索表单 -->
		<SearchForm
			:isSearchForm="isSearchForm"
			:searchColumns="searchColumns"
			:searchModel="searchModel"
			@onSearchSubmit="onSearchSubmit"
			@onRefresh="onRefresh"
		></SearchForm>
		<!-- 功能区域-->
		<!-- 显示内容为tableHeader插槽，selectedListIds选中项列表  -->
		<div style="padding: 5px">
			<slot name="tableHeader" :selectedListIds="selectedListIds"></slot>
		</div>
		<!-- 表格 -->
		<el-table :border="true" stripe v-bind="$attrs" :data="tableData" :row-key="rowKey" @selection-change="selectionChange">
			<el-table-column type="selection" width="55" />
			<el-table-column type="index" width="50" />
			<el-table-column v-for="col in columns" :prop="col.prop" :key="col.prop" :label="col.label" :width="col.width">
				<template #default="scope" v-if="$slots[col.prop]">
					<slot :name="col.prop" v-bind="scope"></slot>
				</template>
			</el-table-column>
		</el-table>

		<!-- 分页 -->
		<Pagination
			style="margin-top: 10px"
			:total="pageable.total"
			@bindSizeChange="bindSizeChange"
			@bindCurrentChange="bindCurrentChange"
		></Pagination>
	</div>
</template>

<script setup lang="ts">
import Pagination from './components/Pagination.vue'
import SearchForm from './components/SearchForm.vue'
import { useTable } from './hooks/usetable'
import { useSelection } from './hooks/useSelection'

// 接收父组件参数
const props = defineProps<{
	columns: any // 必传
	requestApi: Function // 必传
	initParam?: {} // 接口参数 ==> 非必传
	propCallback?: (data: any) => any // 参数数据的回调函数，可以对数据进行处理 ==> 非必传
	dataCallback?: (data: any) => any // 返回数据的回调函数，可以对数据进行处理 ==> 非必传
	rowKey?: string // 行数据的 Key，用来优化 Table 的渲染，当表格数据多选时，所指定的 id ==> 非必传（默认为 id）
}>()

const {
	tableData,
	pageable,
	searchColumns,
	searchModel,
	isSearchForm,
	bindSizeChange,
	bindCurrentChange,
	onSearchSubmit,
	onRefresh
} = useTable(props)

const { selectionChange, selectedListIds } = useSelection(props.rowKey) // 表格多选 Hooks
</script>

<style scoped lang="scss"></style>
